<!--学生成绩详情(自己)-->
<template>
  <div id="grade">
    <!--<div>-->
      <!--<p>当前参数：{{$route.params.id}}</p>-->
    <!--</div>-->
    <div class="head">
      <div v-if="identity == 1">
        <h4 class="col-sm-6">学号:{{$route.params.id}}</h4>
        <h4 class="col-sm-6">
          <button class="btn btn-danger" @click = "deleteStu()">删除</button>
        </h4>
      </div>
      <div v-else="">
        <h4 class="col-sm-6">专业班级:{{className}}</h4>
        <h4 class="col-sm-6">{{$route.params.id}}</h4>
      </div>
    </div>
    <div class="table-responsive">
      <table class="table">
        <thead>
        <tr>
          <!--<th class="text-center">姓名</th>-->
          <!--<th class="text-center">学号</th>-->
          <th class="text-center">专业成绩(80%)</th>
          <th class="text-center">基础性素质测评成绩（10%）</th>
          <th class="text-center">发展性素质测评成绩(10%)</th>
          <th class="text-center">五分制总评</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <!--<td>{{grade.stuName}}</td>-->
          <!--<td>{{grade.stuNum}}</td>-->
          <td>{{grade.study | byte}}</td>
          <td>{{grade.basis | byte}}</td>
          <td>{{grade.development}}</td>
          <td>{{grade.sum | byte}}</td>
        </tr>
        </tbody>
      </table>
    </div>
    <br><br>


    <div>
      <h4>班级测评</h4>
      <table class="table">
        <thead>
        <tr>
          <!--<th class="text-center">学号</th>-->
          <th class="text-center">A数量</th>
          <th class="text-center">B数量</th>
          <th class="text-center">C数量</th>
          <th class="text-center">D数量</th>
          <th class="text-center">平均成绩</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <!--<td>{{classEva.studentId}}</td>-->
          <td>{{classEva.gradeANum}}</td>
          <td>{{classEva.gradeBNum}}</td>
          <td>{{classEva.gradeCNum}}</td>
          <td>{{classEva.gradeDNum}}</td>
          <td>{{classEva.avgGrade}}</td>
        </tr>
        </tbody>
      </table>
    </div>
<br><br>
    <div>
      <h4>小组测评</h4>
      <table class="table">
        <thead>
        <tr>
          <!--<th class="text-center">学号</th>-->
          <th class="text-center">A数量</th>
          <th class="text-center">B数量</th>
          <th class="text-center">C数量</th>
          <th class="text-center">D数量</th>
          <th class="text-center">平均成绩</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <!--<td>{{groupEva.studentId}}</td>-->
          <td>{{groupEva.gradeANum}}</td>
          <td>{{groupEva.gradeBNum}}</td>
          <td>{{groupEva.gradeCNum}}</td>
          <td>{{groupEva.gradeDNum}}</td>
          <td>{{groupEva.avgGrade}}</td>
        </tr>
        </tbody>
      </table>
    </div>
    <br><br>
    <div>
      <h4>{{$route.params.id}}测评记录</h4>
      <table class="table">
        <thead>
        <tr>
          <th class="text-center">被评价人学号</th>
          <th class="text-center">评价时间</th>
          <th class="text-center">评价成绩</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="record in records">
          <td>{{record.beEvaluatedNum}}</td>
          <td>{{record.evaluationDate | formatDate }}</td>
          <td>{{record.grade}}</td>
        </tr>
        </tbody>
      </table>
    </div>

    <br><br>
    <div>
      <h4>发展性素质评测记录</h4>
      <table class="table">
        <thead>
        <tr>
          <th class="text-center">申报内容</th>
          <th class="text-center">申报分数</th>
          <th class="text-center">申报文件</th>
          <th class="text-center">是否批准</th>
          <th class="text-center">删除</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="s in science">
          <td>{{s.content}}</td>
          <td>{{s.num}}</td>
          <td>
            <span class="glyphicon glyphicon-folder-open" @click="picture($event)" :data-file="s.file"></span>
          </td>
          <td>
            <p v-show="s.approve == 1">已同意</p>
            <p v-show="s.approve == -1">未同意，理由<span>{{s.feedback}}</span></p>
          </td>
          <td>
            <button class="btn btn-danger btn-sm" @click='deleteScience(s.id)'>删除</button>
          </td>
        </tr>
        </tbody>
      </table>
    </div>


    <br><br>
    <div>
      <h4>记实记录</h4>
      <table class="table">
        <thead>
        <tr>
          <th class="text-center">项目</th>
          <th class="text-center">提交分数</th>
          <th class="text-center">日期</th>
          <th class="text-center">是否同意</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="d in documentary">
          <td>{{d.projectNumber}}</td>
          <td>{{d.score}}</td>
          <td>{{d.date | formatDate}}</td>
          <td>
            <p class="p" v-show="d.agree">是</p>
            <p class="p" v-show="!d.agree">否</p>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
    <div class="modal fade" id="update" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title" id="myModalLabel">申报文件</h4>
          </div>
          <div class="modal-body">
            <img :src="shower" alt="" width="100%">
            <p v-show="shower == ''">图片未上传</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal -->
    </div>
    <!--一个虚拟点击事件-->
    <button id = 'virtualButton' type="button" style="display: none" @click="doModal()">123</button>

  </div>

</template>

<script>
  /*
   *
   *
   *个人信息
   *
   * */
  import API from '../config/request'
  import {formatDate, byte} from '../config/date'
  import { decodeData } from '../config/base64'
  export default {
    name: 'grade',
    data () {
      return {
        url: API.URL,
        className:'',
        identity: '',
        grade: {
          stuName : '无记录',
          stuNum : '',
          study :'',
          stuEva : '',
          groupEva : '',
          documentary : '',
          development : '',
          sum : ''
        },
        classEva:[],
        groupEva:[],
        records:[{
          id: '',
          beEvaluatedNum: '无记录',
          evaluationDate:'',
          evaluatorNum:'',
          grade:''
        }],
        documentary:[{
          projectNumber:'无记录',
          score:'',
          date:''
        }],
        science:[],
        shower:'',
        classId:''
      }
    },
    created () {
      this.identity = decodeData(localStorage.getItem('identity'))
      if(this.identity == 0 || this.identity == 1){
        this.classId = this.$route.params.classId
      }else{
        this.classId = decodeData(localStorage.getItem('classId'))
      }
      try{
        this.getClassPro()
        this.getGrade()
        this.getClass()
        this.getGroup()
        this.getDocumentary()
        this.getRecord()
        this.getScience()
      }catch(e){
        console.log(e)
      }
    },
    methods: {
      //拿到班级跟专业
      getClassPro: function () {
        this.$http.get(this.url+'common/findoneclass?classId='+this.classId).then(function (response) {
          console.log(response.bodyText)
          this.className = response.bodyText
        })
      },
      //查找一个人的成绩
      getGrade: function () {
        console.log(this.$route.params.id)
        this.$http.get(this.url+'common/findonegrade?stuId='+this.$route.params.id).then(function (response) {
          this.grade = response.body
        })
      },
      //得到班级测评记录
      getClass: function () {
        this.$http.get(this.url+'evaluation/findonestugreade?stuId='+this.$route.params.id).then(function (response) {
          this.classEva = response.body
        })
      },
      //小组测评
      getGroup: function () {
        this.$http.get(this.url+'evaluation/findonegroupgrade?stuId='+this.$route.params.id).then(function (response) {
          this.groupEva = response.body
        })
      },
      //测评记录
      getRecord: function () {
        this.$http.get(this.url+'evaluation/findbyevaluator?stuId='+this.$route.params.id).then(function (response) {
          this.records = response.body
        })
      },
      getDocumentary: function () {
        this.$http.get(this.url+'documentary/getDocumentByNumber?studentNumber='+this.$route.params.id).then(function (response) {
          this.documentary = response.body
        })
      },
      getScience:function () {
        this.$http.get(this.url+'development/studentGet?studentId='+this.$route.params.id).then(function (response) {
          this.science = response.body

        })
      },
      picture: function (event) {
        this.shower = event.target.getAttribute('data-file')
        $('#virtualButton').click()
      },
      //删除某学生
      deleteStu(){
        //学号
        alert(this.$route.params.id)
        let data = {
          'stuNumber' : this.$route.params.id ,
          'classId' : this.classId
        }
        this.$http.get(this.url+'common/deStu', data,
          {emulateJSON:true}).then(function (response) {
          this.science = response.body
        })
      },
      deleteScience(id){
        let data = id
        this.$http.post(this.url+'development/delete',data,
          {emulateJSON: true}
        ).then(function (response) {
          console.log("删除成功")
        },function () {
          alert("删除失败，服务器端错误")
        })
      },
      doModal(){
        $('.modal').modal('toggle');
      }
    },
    filters: {
      formatDate(data) {
        if(data == null || data == undefined){
          return '日期显示错误';
        }else{
          return formatDate(data);
        }

      },
      byte (data){
        return byte(data)
      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
  .head{
    width: 100%;
    height: 80px;
    margin:20px 0;
  }
  #grade{
    width: 100%;
    margin: 0 auto;
  }

</style>
